<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Rolling Ball and Step</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="450" style="border:1px solid #000;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 20px Times New Roman';

        // Geometric parameters
        const a = 100; // Radius of the ball
        const h = 60;  // Height of the step
        const groundY = 350;
        
        // Position the step corner 'A' to define the layout
        const cornerAX = 300;
        const cornerAY = groundY - h;
        
        // Calculate the ball's center position based on tangency
        // The ball is tangent to the ground (y=groundY) and the corner (cornerAX, cornerAY)
        const cx = cornerAX - Math.sqrt(a * a - (a - h) * (a - h));
        const cy = groundY - a;

        const groundStartX = 50;
        const stepEndX = 480;

        // --- Drawing ---

        // 1. Draw the ground level and step outline
        ctx.beginPath();
        ctx.moveTo(groundStartX, groundY);
        ctx.lineTo(cornerAX, groundY);
        ctx.lineTo(cornerAX, cornerAY);
        ctx.lineTo(stepEndX, cornerAY);
        ctx.stroke();

        // 2. Draw the ball (circle)
        ctx.beginPath();
        ctx.arc(cx, cy, a, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the center of the ball
        ctx.beginPath();
        ctx.arc(cx, cy, 3, 0, 2 * Math.PI);
        ctx.fill();

        // 4. Draw and label the radius 'a'
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx, groundY);
        ctx.stroke();
        // Arrow for radius
        ctx.beginPath();
        ctx.moveTo(cx, groundY);
        ctx.lineTo(cx - 5, groundY - 8);
        ctx.moveTo(cx, groundY);
        ctx.lineTo(cx + 5, groundY - 8);
        ctx.stroke();
        ctx.fillText('a', cx + 10, cy + a / 2);

        // 5. Draw the cross-hatching for the step
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(cornerAX, cornerAY);
        ctx.lineTo(stepEndX, cornerAY);
        ctx.lineTo(stepEndX, groundY);
        ctx.lineTo(cornerAX, groundY);
        ctx.closePath();
        ctx.clip(); // Restrict drawing to the step area

        ctx.lineWidth = 1.5;
        const spacing = 15;
        for (let i = cornerAX - h; i < stepEndX; i += spacing) {
            ctx.beginPath();
            ctx.moveTo(i, groundY);
            ctx.lineTo(i + h, cornerAY);
            ctx.stroke();
        }
        ctx.restore(); // Remove the clipping path

        // 6. Draw and label the height 'h'
        ctx.lineWidth = 2; // Restore line width
        const hLabelX = stepEndX + 20;
        ctx.beginPath();
        ctx.moveTo(hLabelX, cornerAY);
        ctx.lineTo(hLabelX, groundY);
        // T-ends for the height line
        ctx.moveTo(hLabelX - 5, cornerAY);
        ctx.lineTo(hLabelX + 5, cornerAY);
        ctx.moveTo(hLabelX - 5, groundY);
        ctx.lineTo(hLabelX + 5, groundY);
        ctx.stroke();
        ctx.fillText('h', hLabelX + 10, groundY - h / 2 + 5);

        // 7. Label the contact point 'A'
        ctx.font = 'bold 20px Times New Roman';
        ctx.fillText('A', cornerAX + 5, cornerAY - 5);

        // 8. Add the figure caption
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.172.', canvas.width / 2, groundY + 50);

    </script>
</body>
</html>